<template>
    <div class="html">
        <div v-if="is_custom">
            <el-switch v-model="print_type" active-text="自定义模板" inactive-text="默认模板">
            </el-switch>
        </div>
        <div style="overflow: auto;height: 100%;width: 100%;">
            <div ref="preview" id="preview">
                <div class="preview">
                    <div v-if="!print_type">
                        <div class="qr-code-label">扫码预览流程</div>
                        <QRCodeGennerator class="qr-code" :input="qrcode">
                        </QRCodeGennerator>
                    </div>
                    <div v-if="print_type" class="print-content-custom" v-html="formattedHtml"></div>
                    <div v-else class="print-content-default" v-html="formattedHtml"></div>
                </div>
            </div>
        </div>
        <span>
            <el-button @click="close">取 消</el-button>
            <el-button type="primary" @click="print">打 印</el-button>
        </span>
    </div>
</template>

<script>
import { v4 as uuid } from 'uuid';
import QRCodeGennerator from '../../components/common/QRCodeGennerator.vue';
import { getInstSettingDetail, getTaskSettingDetail, savePrintInstData, savePrintTaskData } from '../../api/process';
import { getHost } from '../../api/com';
export default {
    components: {
        QRCodeGennerator
    },
    props: {
        instId: {
            type: String,
            required: false
        },
        taskId: {
            type: String,
            required: false
        },
        value: ''
    },
    data() {
        return {
            print_type: false,
            html: '',
            system_html: '',
            is_custom: false,
            self_value: '',
            qrcode_data: '',
            host: '',
            guid: ''
        }
    },
    mounted() {
        this.guid = uuid();
        getHost().then(res => {
            if ('SUCCESS' === res.status) {
                this.host = res.data
            }
        }
        )


        if (this.taskId) {//有任务，则使用任务刷新
            this.loadingTaskSettingData(this.taskId);
        } else if (this.instId) {//否则使用实例刷新
            this.loadingInstSettingData(this.instId);
        }
    },
    watch: {
        print_type(val) {
            if (val) {
                this.self_value = this.html;
            } else {
                this.self_value = this.system_html;
            }
        },//监听
        html(val) {
            if (this.print_type) {//自定义
                this.self_value = val;
            }
        },//监听
        system_html(val) {
            if (!this.print_type) {//系统默认
                this.self_value = val;
            }
        },
        self_value(val) {
            this.$emit('input', val);
        }//更新父级数据
    },
    computed: {
        qrcode() {
            let d = this.qrcode_data = this.host + '/erupt-flow/index.html#/getFlowByQRCode/' + this.guid;
            return d;
        },
        formattedHtml() {
            return `
        <style>
                body { font-family: Arial, sans-serif; }
                table { border-collapse: collapse; width: 100%; }
                th, td { border: 1px solid #ddd; padding: 8px; }
                /* 添加更多样式以匹配 UEditor 的样式 */
            </style>
        ${this.self_value}
      `;
        },
    },

    methods: {
        //载任务设置详情
        loadingTaskSettingData(taskId) {
            getTaskSettingDetail(taskId).then(res => {
                if ('SUCCESS' === res.status) {
                    this.html = res.data.settings.templateHtml || '未定义打印模板';
                    this.system_html = res.data.settings.system_templateHtml || '未定义打印模板';
                    this.is_custom = res.data.settings.template || false;
                    this.print_type = res.data.settings.template || false;
                }
            })
        },
        //加载实例设置详情
        loadingInstSettingData(instId) {
            getInstSettingDetail(instId).then(res => {
                if ('SUCCESS' === res.status) {
                    this.html = res.data.settings.templateHtml || '未定义打印模板';
                    this.system_html = res.data.settings.system_templateHtml || '未定义打印模板';
                    this.is_custom = res.data.settings.template || false;
                    this.print_type = res.data.settings.template || false;
                }
            })
        },
        close() {
            this.$emit('close');
        },
        print() {
            if (this.print_type) {//自定义
                this.printCustom();
            } else {
                this.printDefault();
            }
            if (!this.print_type) {
                if (this.taskId) {//有任务，则使用任务储存
                    savePrintTaskData(this.taskId, this.guid, this.self_value)
                } else if (this.instId) {//有实例，则使用实例储存
                    savePrintInstData(this.instId, this.guid, this.self_value)
                }
            }

        },
        printCustom() {
            printJS({
                printable: this.self_value,
                type: 'raw-html',
                targetStyles: ['*'],
                style: `
                     @media print {
                     body { font-family: Arial, sans-serif; }
                     table { border-collapse: collapse; width: 100%; }
                     th, td { border: 1px solid #ddd; padding: 8px; }
                    /* 其他打印样式 */
                    }
    `,

            })

        },
        printDefault() {
            printJS({
                printable: this.getHtmlString(),
                // type: 'html',
                // style: '@page { size: A4; margin: 20mm; }' // 你可以自定义打印样式
                // printable: this.html_value||'无内容',
                // header: '打印',
                type: 'raw-html',
                targetStyles: ['*'],
                style: `
                     @media print {
                     body { font-family: Arial, sans-serif; }
                     table { border-collapse: collapse; width: 100%; }
                     th, td { border: 1px solid #ddd; padding: 8px; }
                    /* 其他打印样式 */
                    }
                    .preview {position: relative;}
                    .qr-code-label {font-size: 10px;position: absolute;right: 10px;top: 0px;}
                    .qr-code {position: absolute;right: 0px;top: 13px;}
                    .print-content-custom {height: 100%;width: 100%;}
                    .print-content-default {position: absolute; top: -15px;height: 100%;width: 100%;}
    `,
                scanStyle: false,

            })

        },
        getHtmlString() {
            // 获取指定元素的 HTML 字符串
            let in_html = this.$refs.preview.innerHTML;
            return in_html;
        }
    }
}
</script>

<style scoped>
.html {
    width: 500px;
    height: 500px;
}

.preview {
    position: relative;
}

.qr-code-label {
    font-size: 10px;
    position: absolute;
    right: 7px;
    top: 0px;
}

.qr-code {
    position: absolute;
    right: -25px;
    top: -8px;
}

.print-content-custom {
    height: 100%;
    width: 100%;
}

.print-content-default {
    position: absolute;
    top: -12px;
    height: 100%;
    width: 100%;
}
</style>